<script setup lang="ts" name="artCommentSend">
import useArtCommentSend from '@/components/index/artical/hooks/artCommentSend'
const { currUser, isShowSend, textarea, focus, sendComment } = useArtCommentSend()
</script>
<template>
  <div id="commentSend" tabindex="1" @focus="focus" @focusout="isShowSend = false">
    <div><img :src="currUser.img" alt="" /></div>
    <div>
      <textarea ref="textarea" name="msg" @focus="focus"></textarea>
      <ul v-show="isShowSend">
        <li><Microphone class="svg" /></li>
        <li><Microphone class="svg" /></li>
        <li @click="sendComment" class="default-button">发送</li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
#commentSend {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  white-space: nowrap;
  color: var(--color2);
  > div:nth-child(1) {
    align-content: start;
    width: 64px;
    height: 64px;
    > img {
      width: 64px;
      height: 64px;
      border-radius: var(--radius);
    }
  }
  > div:nth-child(2) {
    justify-self: start;
    > textarea {
      color: var(--color-font);
      resize: none;
      height: 64px;
      min-width: 600px;
      width: 60%;
      border: none;
      outline: none;
      padding: 10px;
      border-radius: var(--radius);
      box-sizing: border-box;
    }
    ul {
      min-width: 600px;
      width: 60%;
      list-style: none;
      > li:last-child {
        padding: 10px;
        float: right;
      }
      > li {
        cursor: pointer;
        float: left;
        > .svg {
          border: 1px solid var(--color2);
          border-radius: var(--radius);
          padding: 6px;
          margin: 4px;
          width: 20px;
          height: 20px;
        }
        > .svg:hover {
          border-color: var(--color3);
        }
      }
    }
  }
}
</style>
